<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			/**/
			div{
				width: 300px;
				height: 300px;
				/**/
				background-color: #e4393c;
				margin-left: 10px;
				margin-top: 10px;
				/*居中：上下 左右 页面宽度固定*/
				margin: 300px auto;
				/*旋转  转换属性：旋转属性值*/
				transform: rotate(1500deg);
				/*美化操作：滤镜属性--下阴影效果：光晕*/
				filter: drop-shadow(0 0 30px #e4393c);
				/*启动动画属性：关键帧名称 过渡时间 流畅度 无限次*/
				animation: heart .8s linear infinite;
			}
			/*俩圆？？？*/
			/*伪类选择器：追加效果：after  语法：任意选择器
			功能：追加一个效果：在元素之后生成一行文本内容
			*/
		   div:after{
			   content: "";
			   display: block;
			   width: 300px;
			   height: 300px;
			   background-color: #e4393c;
			   /*倒角：画圆*/
			   border-radius: 50%;
			   /*微调定位*/
			   position: relative;
			   left: -150px;
			   top: -300px;
		    }
		   div:before{  /* before */
		   	content: "";
		    display: block;
		   	width: 300px;
		   	height: 300px;
		   	background-color: #e4393c;
		   	/*倒角：画圆*/
		   	border-radius: 50%;
		   	/*微调定位：*/
		   	position: relative;
		   	top: 150px;
			}
			/*关键帧属性：功能：手翻书功能*/
			@keyframes heart{
				0%{
					/*缩放 转换属性  属性值 scale(1代表等比例，以下缩小，以上放大)*/
					transform: rotate(150deg) scale(1);
				}
			    30%{
					transform: rotate(135deg) scale(.8);
			    }
				100%{
					transform: rotate(200deg) scale(1.2);
				}
		    }
		</style>
	</head>
	<body>
		<!--心 html:div-->
		<div></div>
	</body>
</html>